{% extends "auth.html" %}
{% block regular_content %}
    <div data-cy="general_info" class="flex flex-col md:flex-row gap-4 md:gap-8 justify-between md:items-center mt-8 mx-2 md:h-64">
        <div class="h-full flex items-center justify-center">
            <div class="container flex flex-col items-center">
                {% if user_info.image %}
                    <img src="{{static('/images/profile_images/' + user_info.image + '.png')}}" class="w-64" alt="{{_('profile_logo_alt')}}">
                {% else %}
                    <img src="{{static('/images/Hedy-logo.png')}}" class="w-64" alt="{{_('profile_logo_alt')}}">
                {% endif %}
            </div>
        </div>
        <div class="flex flex-col gap-1 w-full h-full max-w-3xl md:justify-center">
            {% if user_info.tags %}
                <div class="w-full flex flex-row mx-2 gap-2">
                    {% for tag in user_info.tags %}
                        <!-- Todo TB: Might be nice to automate this a bit in the future (works fine for now) 08-22 -->
                        {% if tag == "teacher" %}
                            <div class="bg-green-500 text-white py-1 rounded-lg font-bold px-3">{{_('teacher')}} ⊙</div>
                        {% elif tag == "certified_teacher" %}
                            <div class="bg-red-500 text-white py-1 rounded-lg font-bold px-3">{{_('certified_teacher')}} ⊙</div>
                        {% elif tag == "admin" %}
                            <div class="bg-yellow-500 text-white py-1 rounded-lg font-bold px-3">{{_('admin')}} ⊙</div>
                        {% elif tag == "distinguished_user" %}
                            <div class="bg-indigo-500 text-white py-1 rounded-lg font-bold px-3">{{_('distinguished_user')}} ⊙</div>
                        {% elif tag == "contributor" %}
                            <div class="bg-pink-500 text-white py-1 rounded-lg font-bold px-3">{{_('contributor')}} ⊙</div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            <div class="w-full bg-blue-200 flex flex-col rounded-lg border border-black">
                <div class="w-full h-12 flex flex-row items-center bg-blue-600 rounded-t-lg px-4 font-medium">
                    <div class="text-white tracking-wide text-4xl">{{user_info.username[0]|upper}}{{user_info.username[1:]}}</div>
                    {% if has_certificate %}
                        <div class="text-white tracking-wide text-4xl">👑</div>
                    {% endif%}                    
                </div>
                {% if user_info.personal_text %}
                    <div class="my-4 px-8 text-xl italic flex flex-col justify-center h-full" rel="noreferrer">
                        {{ user_info.personal_text }}
                    </div>
                {% endif %}
                <div class="mt-auto">
                    <div class="font-semibold bg-blue-600 pb-2 pt-2 text-white w-full flex flex-row gap-2 px-2 justify-between rounded-b-lg items-center">
                        <div class="profile-nametag__stats">{{ user_program_count }} {{_('programs')|lower}}</div>
                        <div class="h-8 w-px border-r border-white relative"></div>
                    </div>
                </div>                
            </div>
        </div>
    </div>
    <h2 class="ml-4 text-3xl">{{_('programs')}}</h2>
    <div class="w-full mb-8" id="program_filter">
        <form>
            <input type="hidden" name="page" value=""> <!-- Submitting the form resets the page -->
            <input type="hidden" name="user" value="{{ from_user }}">
            <div class="flex flex-row px-4 w-full items-center border border-gray-400 py-2 rounded-lg gap-4">
                <select name="level" class="block appearance-none w-1/3 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" data-autosubmit="true">
                    <option selected value="">&mdash; {{_('level')}} &mdash;</option>
                    {% if not request.args.get('adventure') %}
                        {% for i in sorted_level_programs %}
                            <option value="{{ i }}" {% if request.args.get('level') == i|string %}selected{% endif %}>{{ i }}</option>
                        {% endfor %}
                    {% else %}
                        {% for i in sorted_adventure_programs[request.args.get('adventure')] %}
                            <option value="{{ i }}" {% if request.args.get('level') == i|string %}selected{% endif %}>{{ i }}</option>
                        {% endfor %}
                    {% endif %}
                </select>
                <select name="adventure" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" data-autosubmit="true">
                    <option selected value="">&mdash; {{ _('adventure') }} &mdash;</option>
                    {% if request.args.get('level') %}
                        {% for name in sorted_level_programs[request.args.get('level')|int] %}
                            <option value="{{ name }}" {% if request.args.get('adventure') == name %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    {% else %}
                        {% for name in sorted_adventure_programs %}
                            <option value="{{ name }}" {% if request.args.get('adventure') == name %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    {% endif %}
                </select>
                <div class="flex flex-col mx-2">
                    <div class="flex flex-row items-center gap-2">
                        <input type="radio" name="filter" value="all" {% if request.args.get('filter') != "submitted" %}checked{% endif %} data-autosubmit="true">
                        <label for="all">{{_('all')}}</label>
                    </div>
                    <div class="flex flex-row items-center gap-2">
                        <input type="radio" name="filter" value="submitted" {% if request.args.get('filter') == "submitted" %}checked{% endif %} data-autosubmit="true">
                        <label for="submitted">{{_('submitted')}}</label>
                    </div>
                </div>
                <button type="submit" class="green-btn">{{_('search_button')}}</button>
            </div>
        </form>
      </div>
    {% if favorite_program or programs %}
        <div class="flex flex-wrap w-full turn-pre-into-ace">
        {% if favorite_program %}
            <div class="border rounded-lg border-yellow-500 mb-4 py-2 w-full">
                <h3 class="text-center z-10 font-bold pb-0 mb-0 text-2xl">{{_('favorite_program')}}</h3>
                <div class="flex flex-wrap mx-auto justify-center gap-4 turn-pre-into-ace" id="user_favourite_program">
                    {{ render_partial('htmx-adventure-card.html', user={}, adventure=favorite_program, is_program=true, is_admin=is_admin, is_favorite=true) }}
                </div>
            </div>            
        {% endif %}
            <div class="flex flex-col w-full">
                <div class="flex flex-wrap mx-auto justify-center gap-4 turn-pre-into-ace" id="public_page_programs">
                    {% if programs|length == 0 %}
                        {{_('no_programs')}}
                    {% else %}
                        {% for program in programs %}
                            {{ render_partial('htmx-adventure-card.html', user={}, adventure=program, is_program=true, is_admin=is_admin) }}
                        {% endfor %}
                    {% endif %}
                </div>
                {% if next_page_url %}
                    <div class="flex w-1/3 mx-16 mt-4 align-self-right">
                            <div>
                                <a href="{{next_page_url}}" class="green-btn">{{_('next_page')}}</a>
                            </div>
                    </div>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="ml-4">{{ user_info.username }} {{_('no_shared_programs')}}</div>
    {% endif %}
{% endblock %}
